<template>
  <div>
    <el-dialog :visible="true" :title="report_data.title" fullscreen class="add_case_dialog" width="70%" :before-close="callOf">
      <el-row>
        <div style="margin-left:200px;margin-right:200px" class="mark-a">
          <span style="font-size:15px;font-weight:bold;margin-left:20px" class="mark-item">Bug率</span>
        </div>
      </el-row>
      <!--    添加显示，日期选择-->
      <el-row v-if="report_data.admin" :gutter="10" style="margin-top: 20px;margin-left:200px">
        <el-select
          v-model="week_date.before_last_week"
          style="margin-left: 20px"
          clearable
          placeholder="第一周"
          @visible-change="getWeeklyTimeSelect"
        >
          <el-option
            v-for="item in weekly_time"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <el-select
          v-model="week_date.last_week"
          style="margin-left: 20px"
          clearable
          placeholder="第二周"
          @visible-change="getWeeklyTimeSelect"
        >
          <el-option
            v-for="item in weekly_time"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
        <el-select
          v-model="week_date.week"
          style="margin-left: 20px"
          clearable
          placeholder="第三周"
          @visible-change="getWeeklyTimeSelect"
          @change="bug_rate_add(0)"
        >
          <el-option
            v-for="item in weekly_time"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>

        <el-button v-if="week_date.week!=''" style="margin-left: 20px" disabled @click="bug_rate_add(1)">计算最新</el-button>
        <el-button v-if="week_date.week===''" style="margin-left: 20px" @click="bug_rate_add(1)">计算最新</el-button>
        <el-tooltip style="margin-left: 20px" placement="top">
          <div slot="content" class="tips-content text-tips-content">
            <span>Tips :</span><br>
            <div class="rule-box">
              1、第一周为上上周，以此类推，第三周即表示本周周报内容.<br>
              2、第三周与计算最新二选一，选择后触发生成周报，即只选择第一周和第二周页面不生成数据.<br>
              3、如果点击计算最新，下拉框会显示出当前日期，且选择后生成的第三周(本周)周报数据是当前日期的最新数据.
            </div>
          </div>
          <i class="el-icon-question" />
        </el-tooltip>
      </el-row>
      <!--    BUG率图标-->
      <el-row :gutter="10" style="margin-top: 30px">
        <el-col :span="24" align="center">
          <div class="chart-container">
            <Zx_week :width="'80%'" :chart-data="bug_rate" />
          </div>
        </el-col>
      </el-row>
      <el-row>
        <div class="mark-a" style="margin-left:200px;margin-right:200px">
          <span style="font-size:15px;font-weight:bold;margin-left:10px" class="mark-item">项目列表</span>
        </div>
      </el-row>
      <!--      项目详情表单-->
      <el-row v-if="report_data.admin" style="margin-left:200px;margin-right:200px">
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          style="margin-left: 20px"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          @change="timeFilter"
        />
      </el-row>
      <el-row v-if="show" style="margin-left: 170px;width: 500px; margin-top: 20px">
        <el-col>
          <el-card class="box-card">
            <span
              style="font-size: 15px; font-weight: bold; margin-left: 10px"
              class="mark-item"
            >{{ pro_count_text }}</span>
          </el-card>
        </el-col>
      </el-row>
      <el-row v-if="show" style="margin-top: 20px">
        <el-col :span="24" align="center">
          <el-table
            :key="tableKey"
            :span-method="objectSpanMethod"
            :header-cell-style="{ background: 'dodgerblue', color: '#eeeeee' }"
            :data="week_list"
            fit
            highlight-current-row
            style="width: 100%"
          >
            <el-table-column label="业务" width="120px" align="center" style="background: #5a5e66">
              <template slot-scope="{ row }">
                <span>{{ row.group }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="项目列表"
              width="330px"
              align="left"
              header-align="center"
            >
              <template slot-scope="{ row }">
                <span>{{ row.project_version }}</span>
              </template>
            </el-table-column>

            <el-table-column label="需求类型" width="100px" align="center">
              <template slot-scope="scope">
                <el-tag
                  v-if="scope.row.ptype == 1"
                  effect="plain"
                  :type="'primary'"
                  disable-transitions
                >标准需求</el-tag>
                <el-tag
                  v-else-if="scope.row.ptype == 2"
                  effect="plain"
                  :type="'success'"
                >验收需求</el-tag>
                <el-tag
                  v-else-if="scope.row.ptype == 3"
                  effect="plain"
                  :type="'danger'"
                >生产事故</el-tag>
                <el-tag
                  v-else-if="scope.row.ptype == 4"
                  effect="plain"
                  :type="'warning'"
                >线上bug</el-tag>
                <el-tag
                  v-else-if="scope.row.ptype == 5"
                  effect="plain"
                  :type="'info'"
                >紧急发版</el-tag>
                <!-- <el-tag v-else style="margin-left: 10px">接口自动化</span> -->
              </template>
            </el-table-column>

            <el-table-column label="状态" width="100px" align="center">
              <template slot-scope="scope">
                <el-tag
                  v-if="scope.row.pstatus == 1"
                  effect="plain"
                  :type="'success'"
                  disable-transitions
                >测试中</el-tag>
                <el-tag
                  v-else-if="scope.row.pstatus == 2"
                  effect="plain"
                  :type="'info'"
                >测试完成</el-tag>
                <el-tag
                  v-else-if="scope.row.pstatus == 3"
                  effect="plain"
                  :type="'danger'"
                >已上线</el-tag>
                <!-- <el-tag v-else style="margin-left: 10px">接口自动化</span> -->
              </template>
            </el-table-column>

            <el-table-column label="项目总结" width="700px" align="center">
              <template slot-scope="scope">
                <!--                <el-input v-if="rowAndColumn[scope.$index]>= 4" v-model="scope.row.project_summary" type="textarea" :rows="rowAndColumn[scope.$index]" placeholder="无" />-->
                <el-input
                  v-model="scope.row.project_summary"
                  type="textarea"
                  class="myInput"
                  autosize
                />
              </template>
            </el-table-column>

            <el-table-column label="详情" align="center" width="180px" class-name="small-padding fixed-width">
              <template slot-scope="{ row }">
                <el-button type="info" size="mini" @click="proDetails(row)">详情</el-button>
                <el-button type="success" size="mini" @click="jump(row)">Mantis</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row v-if="report_data.edit" :gutter="10" style="margin-top: 20px">
        <el-col :span="24" align="center">
          <el-button type="danger" @click="callOf('form')">取消</el-button>
          <el-button type="primary" style="margin-left: 200px" @click="addReport()">保存</el-button>
        </el-col>
      </el-row>
      <Details
        v-if="pro_details_show"
        ref="popBox"
        :modal="false"
        :append-to-body="true"
        :pro-info="proInfo"
        @closePop="closePop"
      />
    </el-dialog>
  </div>
</template>

<script>
import Zx_week from './MixLineChart'
import Details from './details'
import { getWeeklyCollect, getWeeklyBugRate, getWeeklyTime, addWeekly, getWeekly } from '@/api/quality'
import { Message } from 'element-ui'
export default {
  name: 'WR',
  components: {
    // demandTypeCharts,
    Zx_week,
    Details
  },
  props: {
    // dialogAdd: Object,
    report_data: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      show: false,
      pro_details_show: false,
      proInfo: {},
      week_date: {
        last_week: '',
        week: '',
        this_week: '',
        before_last_week: ''

      },
      weekly_time: [],
      dateValue: '',
      listQuery: {
        start_time: '',
        end_time: ''
      },
      tableKey: 0,
      fromData: {},
      pos: 0,
      bug_rate: {},
      pro_count_text: '',
      len_Object: [],
      week_list: [],
      upower: 0,
      change: [],
      old: {},
      rowAndColumn: [],
      rowRoomColumn: []
    }
  },
  mounted() {
    this.getDate()
  },
  methods: {
    jump(row) {
      console.log(row)
      if (row.mantis_address === '') {
        Message.info('未创建Mantis')
      } else {
        window.open(row.mantis_address)
      }
    },
    closePop(formName) {
      this.pro_details_show = false
    },
    proDetails(row) {
      this.proInfo = { pid: row.pid }
      this.pro_details_show = true
    },
    formateDate(dateformate) {
      var date = new Date(dateformate)
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      var d = date.getDate()
      m = m > 9 ? m : '0' + m
      return y + '-' + m + '-' + d
    },
    bug_rate_add(num) {
      if (num === 1) { // 表示计算当日之前的最新周报数据
        const now = Date()
        this.week_date.this_week = this.formateDate(now)
      } else {
        if (this.week_date.week === '' || this.week_date.last_week === '' || this.week_date.before_last_week === '') {
          getWeeklyBugRate({
            last_week: '',
            week: '',
            this_week: '',
            before_last_week: ''
          }).then((res) => {
            this.bug_rate = res.data
          })
          return
        } else {
          this.week_date.this_week = ''
        }
      }
      getWeeklyBugRate(this.week_date).then((res) => {
        this.bug_rate = res.data
      })
    },
    timeFilter() {
      this.listQuery.start_time = this.dateValue[0]
      this.listQuery.end_time = this.dateValue[1]
      this.rowAndColumn = []
      this.rowRoomColumn = []
      this.pos = 0
      this.getList()
    },
    callOf() {
      this.$emit('closePop')
    },
    getList() {
      getWeeklyCollect(this.listQuery).then((res) => {
        this.week_list = res.data
        if (this.week_list.length > 0) {
          this.show = true
          // pro_count_text
        }
        this.proText()
        this.getListDataForRowAndColumn(this.week_list)
      })
    },
    proText() {
      this.pro_count_text = '本周项目' + this.week_list.length + '个,'
      let c = 0
      for (const i in this.week_list) {
        console.log(this.week_list[i])
        if (this.week_list[i].pstatus === '3') {
          c += 1
        }
      }
      this.pro_count_text = this.pro_count_text + c + '个已上线.'
    },
    getDate() {
      if (this.report_data.id !== '') {
        getWeekly(this.report_data.id).then((res) => {
          this.week_list = res.data.collects
          this.old = JSON.parse(JSON.stringify(this.week_list))
          this.getListDataForRowAndColumn(this.week_list)
          if (this.week_list.length > 0) {
            this.show = true
          }
          this.bug_rate = res.data.bug_rate_chart
          this.proText()
        })
      }
    },
    getWeeklyTimeSelect() {
      console
      getWeeklyTime().then((response) => {
        this.weekly_time = response.data
      })
    },
    addReport() {
      if (this.report_data.id === '') {
        this.fromData = {
          creater: this.report_data.user_name,
          id: '',
          start_time: this.listQuery.start_time,
          end_time: this.listQuery.end_time,
          bug_rate_chart: this.bug_rate,
          collects: this.week_list,
          last_week_date: this.week_date.last_week,
          before_last_week_date: this.week_date.before_last_week,
          this_week_date: this.week_date.this_week
        }
        addWeekly(this.fromData).then((res) => {
          Message.success(res.message)
        }).catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
      } else {
        this.findChange()
        this.fromData = {
          id: this.report_data.id,
          creater: this.report_data.user_name,
          collects: this.change
        }
        addWeekly(this.fromData).then((res) => {
          Message.success(res.message)
        }).catch((error) => {
          Message.error(error.msg || error.message || error.value)
        })
      }
      this.$parent.getWeekly()
      this.callOf()
    },
    findChange() {
      for (var i = 0; i < this.week_list.length; i++) {
        if (this.week_list[i].project_summary !== this.old[i].project_summary) {
          this.change.push(this.week_list[i])
        }
      }
    },
    getListDataForRowAndColumn(data) {
      for (var i = 0; i < data.length; i++) {
        if (i === 0) {
          this.rowAndColumn.push(1)
          this.pos = 0
        } else {
          if (data[i].group === data[i - 1].group) {
            this.rowAndColumn[this.pos] += 1
            this.rowAndColumn.push(0)
          } else {
            // 不相等push 1
            this.rowAndColumn.push(1)
            this.pos = i
          }
        }
      }
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const self = this
      if (columnIndex === 0 || columnIndex === 4) {
        if (self.rowAndColumn[rowIndex]) {
          const rowNum = self.rowAndColumn[rowIndex]
          return {
            rowspan: rowNum,
            colspan: rowNum > 0 ? 1 : 0
          }
        }
        return {
          rowspan: 0,
          colspan: 0
        }
      }
    }
  }
}
</script>

<style scoped>
.mark-a {
  border-radius: 4px;
  margin: 10px 0 30px;
  background-color: rgba(175, 196, 225, 0.8);
  height: 30px;
  line-height: 30px;
  color: #fff;
}
.mark_chart {
  border-radius: 4px;
  background-color: #a5e7f0;
  height: 30px;
  width: 100%;
  line-height: 30px;
  color: #fff;
}
</style>
